<template>
  <div>
    <Drawer :title="title" v-model="visible" width="1200" :mask-closable="false">
      <Row :gutter="16">
        <Col span="8">
          <Card>
            <Form ref="editSituationForm" :model="data" :label-width="100">
              <FormItem label="项目名称" prop="project_id" class="margin-bottom-3">
                <b>{{ data.project_name }}</b>
              </FormItem>
              <FormItem label="电压等级" prop="voltage" class="margin-bottom-3">
                <Select v-model="data.voltage" clearable filterable style="width:220px">
                  <Option v-for="item in voltageList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
              <FormItem label="线路长度" prop="line_length" class="margin-bottom-3">
                <Input v-model="data.line_length" style="width: 220px"/>
              </FormItem>
              <FormItem label="架设方式" prop="erection_way" class="margin-bottom-3">
                <Select v-model="data.erection_way" clearable filterable style="width:220px">
                  <Option v-for="item in erectionList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
              <FormItem label="排列方式" prop="arrange_way" class="margin-bottom-3">
                <Select v-model="data.arrange_way" clearable filterable style="width:220px">
                  <Option v-for="item in arrangeList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
              <FormItem label="导线型号" prop="wire" class="margin-bottom-3">
                <Input v-model="data.wire" style="width: 220px"/>
              </FormItem>
              <FormItem label="配变架设" prop="transformer_way" class="margin-bottom-3">
                <Select v-model="data.transformer_way" clearable filterable style="width:220px">
                  <Option v-for="item in transformerList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
              <FormItem label="地形" prop="terrain" class="margin-bottom-3">
                <Select v-model="data.terrain" clearable filterable style="width:220px">
                  <Option v-for="item in terrainList" :value="item.name_id" :key="item.name_id">{{ item.name }}</Option>
                </Select>
              </FormItem>
              <FormItem label="设计说明" prop="design_content" class="margin-bottom-3">
                <Input v-model="data.design_content" style="width: 220px" type="textarea" :rows="10"/>
              </FormItem>
            </Form>
          </Card>
        </Col>
        <Col span="16">
          <Card>
            <Row class="operation">
              <Button @click="addPole" type="primary" icon="plus-round" style="margin-bottom: 16px">添加杆塔</Button>
              <Button @click="createMaterialOrder" type="success" icon="clipboard" style="margin-bottom: 16px; margin-left: 16px;">创建材料单
              </Button>
          </Row>
          <Row>
            <Table
              height="320"
              border
              :columns="columnPoleDetails"
              :data="dataPoleDetail"
              sortable="custom"
              ref="tablePoleDetail">
            </Table>
          </Row>
          </Card>
          <Card>
            <Row>
              <span style="font-size: 18px;">杆塔汇总表</span>
            </Row>
            <Row>
              <Table
                height="320"
                border
                :columns="columnPoleSummaries"
                :data="dataPoleSummary"
                sortable="custom"
                ref="tablePoleSummary">
              </Table>
            </Row>
          </Card>
        </Col>
      </Row>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">确定</Button>
      </div>
    </Drawer>
    <Modal title="添加杆塔" v-model="newPoleVisible" :mask-closable='false' :width="500" :styles="{top: '200px'}">
      <Form ref="newPoleForm" :model="newPoleForm" :label-width="140">
        <FormItem label="选择典设" class="margin-bottom-3">
          <RadioGroup v-model="newPoleForm.sys_or_local" @on-change="getClass">
            <Radio label="系统典型设计" checked></Radio>
            <Radio label="我的典型设计"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="系统典型设计分类" prop="typicalClass" class="margin-bottom-3" v-show="newPoleForm.sys_or_local == 1">
          <Select v-model="newPoleForm.sysTypicalClass" clearable filterable style="width:300px" @on-change="filterSysTypical">
            <Option v-for="item in sysTypicalClass" :value="item.id" :key="item.id">{{ item.classification_name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="系统典型设计" prop="typicalDesignId" class="margin-bottom-3" v-show="newPoleForm.sys_or_local == 1">
          <Select v-model="newPoleForm.sysTypicalDesign" clearable filterable style="width:300px" >
            <Option v-for="item in sysTypicalDesignFilter" :value="item.id" :key="item.id">{{ item.typical_name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="我的典型设计分类" prop="typicalClass" class="margin-bottom-3" v-show="newPoleForm.sys_or_local == 2">
          <Select v-model="newPoleForm.myTypicalClass" clearable filterable style="width:300px" @on-change="filterMyTypical">
            <Option v-for="item in myTypicalClass" :value="item.id" :key="item.id">{{ item.classification_name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="我的典型设计" prop="typicalDesignId" class="margin-bottom-3" v-show="newPoleForm.sys_or_local == 2">
          <Select v-model="newPoleForm.myTypicalDesign" clearable filterable style="width:300px" >
            <Option v-for="item in myTypicalDesignFilter" :value="item.id" :key="item.id">{{ item.typical_name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="杆号名称" prop="pole_name" class="margin-bottom-3">
          <Input v-model="newPoleForm.pole_name" style="width: 300px"/>
        </FormItem>
        <FormItem label="杆号排序" prop="sort_order" class="margin-bottom-3">
          <Input v-model="newPoleForm.sort_order" style="width: 300px"/>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" :loading="submitLoading" @click="submitSortPole">提交</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { getPoleDetail, getSumPoleDetail, getTypicalDesign, getSysTypicalClass, getMyTypicalClass, insertPoleDetail,
         getProjectMaterial, insertPoleSummary, createProjectMaterial, updateProjectSituation } from '@/api/project';
import moment from 'moment';
export default {
  name: 'edit-situation',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    situationParams: Array,
  },
  data() {
    return {
      visible: this.value,
      title: "编辑项目概况",
      height: 540,
      submitLoading: false,
      voltageList: [],
      erectionList: [],
      arrangeList: [],
      transformerList: [],
      terrainList: [],
      columnPoleDetails: [
        {
          title: '杆号',
          key: 'pole_name',
          align: "center",
          width: 80
        },
        {
          title: '杆型',
          key: 'pole_type',
          width: 120
        },
        {
          title: '典设杆型名称',
          key: 'typical_name',
          width: 220
        },
        {
          title: '排序',
          key: 'sort_order',
          width: 70
        },
        {
          title: '操作',
          key: 'action',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.removePole(params.row)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.sortPole(params.row)
                  }
                }
              }, '排序')
            ]);
          }
        }
      ],
      dataPoleDetail: [],
      columnPoleSummaries: [
        {
          title: '典设杆型名称',
          key: 'typical_name',
          width: 320
        },
        {
          title: '杆型',
          key: 'pole_type',
          width: 120
        },
        {
          title: '数量',
          key: 'count',
          align: "center",
          width: 120
        },
      ],
      dataPoleSummary: [],
      sysTypicalDesign: [],
      sysTypicalDesignFilter: [],
      myTypicalDesign: [],
      myTypicalDesignFilter: [],
      newPoleVisible: false,
      sysTypicalClass: [],
      sysTypicalClass: [],
      newPoleForm: {
        project_id: 0,
        sys_or_local: 0,
        myTypicalClass: 0,
        sysTypicalClass: 0,
        myTypicalDesign: 0,
        sysTypicalDesign: 0,
        pole_name: '',
        sort_order: 0.0
      }
    }
  },
  methods: {
    getTypicalClass() {
      getSysTypicalClass().then(res => {
        if (res.code === 0) {
          this.sysTypicalClass = res.data;
        }
      });
      getMyTypicalClass().then(res => {
        if (res.code === 0) {
          this.myTypicalClass = res.data;
        }
      });
    },
    getPoleDetailList() {
      const params = {project_id: this.data.project_id};
      getPoleDetail(params).then(res => {
        if (res.code === 0) {
          this.dataPoleDetail = res.data;
        }
      });
      getSumPoleDetail(params).then(res => {
        if (res.code === 0) {
          this.dataPoleSummary = res.data;
        }
      });
    },
    getClass(v) {
      this.newPoleForm.sys_or_local = v === '系统典型设计' ? 1 : 2;
    },
    filterSysTypical(v) {
      this.sysTypicalDesignFilter = this.sysTypicalDesign.filter(item => item.typical_classification_id == v)
    },
    filterMyTypical(v) {
      this.myTypicalDesignFilter = this.myTypicalDesign.filter(item => item.typical_classification_id == v)
    },
    submitSortPole() {
      this.newPoleForm.project_id = this.data.project_id;
      let params = {};
      params.project_id = this.data.project_id;
      params.pole_name = this.newPoleForm.pole_name;
      params.sort_order = this.newPoleForm.sort_order;
      if (this.newPoleForm.sys_or_local == 1) {
        params.typical_design_id = this.newPoleForm.sysTypicalDesign;
      } else {
        params.typical_design_id = this.newPoleForm.myTypicalDesign;
      }
      this.submitLoading = true;
      insertPoleDetail(params).then(res => {
        this.submitLoading = false;
        if (res.code === 0) {
          this.$Message.success(res.message);
        }
        this.newPoleVisible = false;
        this.getPoleDetailList();
      })
    },
    getTypicalDesignBySysOrLocal() {
      getTypicalDesign({sys_or_local: 1}).then(res => {
        if (res.code === 0) {
          this.sysTypicalDesign = res.data;
        }
      });
      getTypicalDesign({sys_or_local: 2}).then(res => {
        if (res.code === 0) {
          this.myTypicalDesign = res.data;
        }
      });
    },
    init() {
      this.voltageList = this.situationParams.filter(item => item.type == 3);
      this.erectionList = this.situationParams.filter(item => item.type == 4);
      this.arrangeList = this.situationParams.filter(item => item.type == 5);
      this.transformerList = this.situationParams.filter(item => item.type == 6);
      this.terrainList = this.situationParams.filter(item => item.type == 7);
      this.getPoleDetailList();
      this.getTypicalDesignBySysOrLocal();
      this.getTypicalClass();
    },
    addPole() {
      this.newPoleForm.project_id = 0;
      this.newPoleForm.sys_or_local = 0;
      this.newPoleForm.myTypicalClass = 0;
      this.newPoleForm.sysTypicalClass = 0;
      this.newPoleForm.myTypicalDesign = 0;
      this.newPoleForm.sysTypicalDesign = 0;
      this.newPoleForm.pole_name = '';
      this.newPoleForm.sort_order = 0.0;
      this.newPoleVisible = true;
    },
    createMaterialOrder() {
      const project_id = this.data.project_id;
      getProjectMaterial({project_id}).then(res => {
        if (res.code === 0 && res.data.count > 0) {
          this.$Message.error('项目物料已经存在，无须再次创建项目物料清单！');
          return;
        }
        if (this.dataPoleDetail.length == 0) {
          this.$Message.error('杆塔列表为空，请行添加杆塔！');
          return;
        }
        // 将杆塔汇总表写入数据库
        insertPoleSummary({project_id}).then(res => {
          if (res.code === 0) {
            createProjectMaterial({project_id}).then(res => {
              if (res.code === 0) {
                this.$Message.success('生成物料清单数据成功，请查看项目物料！');
                // const today = new Date().toLocaleString();
                const today = moment(new Date()).format('YYYY-MM-DD');
                const id = this.data.id;
                let params = {id, material_list_time: today};
                updateProjectSituation(params);
              }
            })
          }
        })
      })
    },
    handleCancel() {
      this.visible = false;
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    submit() {
      updateProjectSituation(this.data).then(res => {
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.$emit("on-submit", value);
          this.visible = false;
        }
      })
    }
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.margin-bottom-3 {
  margin-bottom: 16px;
}
</style>